<template>
  <div>
    <h3>图片上传</h3>
    <div class="content">
      <el-card  shadow="never">
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="path"
          name="uploadFile"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :file-list="fileList"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">上传图片只能是 JPG 、PNG 或 GIF 格式，且不超过10MB</div>
        </el-upload>
      </el-card>
    </div>
  </div>
</template>

<script>
    export default {
        name: "UploadFile",
        data(){
            return{
                fileList: [],
                path:"http://8.130.94.42:8080/uploadFile/upload"
            }
        },
        methods: {
            submitUpload() {
                this.$refs.upload.submit();
            },
            //文件上传成功
            handleSuccess(res, file) {
                //this.form.avatar=file.response
                console.log(file)
                if (file.response!=""){
                    this.$message({
                        message: file.name+'上传成功',
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: file.name+'上传失败',
                        type: 'error'
                    });
                }
                //this.imageUrl = URL.createObjectURL(file.raw);
            },
            //文件上传之前
            beforeUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isgif = file.type === 'image/gif';
                const isLtnM = file.size / 1024 / 1024 < 10;
                if (!isJPG && !isPNG && !isgif) {
                    this.$message.error('上传头像图片只能是 JPG 、PNG 或 GIF 格式!');
                    return false;
                }
                if (!isLtnM) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                    return false;
                }
                return true;
            },
        }
    }
</script>

<style scoped>
  @media screen and (max-width: 768px){
    .div-right{
      padding: 10px;
      display: inline-block;
    }
  }
  @media screen and (min-width: 768px){
    .div-right{
      width: 40%;
      padding: 10px;
      display: inline-block;
      float: right;
    }
  }
  .tabs{
    font-size: 30px !important;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
    background-color: #ffffff;
  }
  /deep/ .el-tabs__item{
    font-size: 16px !important;
  }
  .content{
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .div-left{
    width: 40%;
    padding: 10px;
    display: inline;
  }
  .img-gsjj{
    max-width: 100%;
    height: auto;
  }
  .div-center{
    margin-left: auto;
    margin-right: auto;
    height: auto;
  }
  h3{
    color: #409EFF;
    padding: 20px;
    margin-left: 7%;
    font-size: 40px;
  }
</style>
